<template>
  <el-form :rules="rules" :model="form" ref="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="性别" prop="sex">
      <el-radio v-model="form.sex" label="0">女</el-radio>
      <el-radio v-model="form.sex" label="1">男</el-radio>
    </el-form-item>

    <el-form-item label="身份证号码" prop="id_card">
      <el-input v-model="form.id_card"></el-input>
    </el-form-item>

    <el-form-item label="电话号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="register('form')">立即注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import request from "../../request/http";
import qs from "qs";
import { mapState } from "vuex";
export default {
  name: "register",
  data() {
    return {
      username: "",
      password: "",
      form: {
        username: "",
        password: "",
        name: "",
        sex: "",
        id_card: "",
        phone: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        id_card: [
          { required: true, message: "请填写身份证", trigger: "blur" },
          { min: 18, max: 18, message: "身份证长度为18位", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号长度为11位", trigger: "blur" },
        ],
      },
    };
  },
  props: ["register_form"],
  computed: {
    ...mapState({
      userid: (state) => state.user_id,
    }),
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: "/register/",
            method: "post",
            data: qs.stringify(this.form),
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("注册成功");
                this.$store.commit("setUserId", res.data.id);
                this.$store.commit("setUserinfo", res.data);
                this.$store.commit("setName", res.data.name);
                this.$store.commit("login");
                this.$router.push({
                  name: "home",
                });
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.input_style {
  margin-bottom: 10px;
}
.login_style {
  width: 260px;
}
</style>
